<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		/*!important>行内样式>id>类选择器>标签*/
		#dd{
			width: 300px;
			background: red;
		}
		.box{
			background: green;
		}
		/* 谨慎使用“!important”,一旦使用样式会很难改变，即使是js也无法修改
		    在元素样式后使用，赋予该样式最高的优先级，对所在的选择器没有任何影响*/
		 div{
		 	width: 200px;
		 	height: 200px;
		 	background: pink !important;
		 }
	</style>
</head>
<body>
     <div style="background-color:blue;" id="dd" class="box"></div>
</body>
</html>